<template>
    <div>
        <h1>Add</h1>
        <h1>
            Vue的基本语法(插值语法+指令)
            1、插值语法{{ }}
            2、指令

            Vue使用的是响应式数据，响应式数据指的是数据变了，视图会自动更新

            Vue的特点：
        </h1>



        <h2>{{ str }}</h2>
        <h2>{{ num }}</h2>
        <h2>{{ arr }}</h2>
        <h2>{{ obj }}</h2>
        <h2>{{ objArr }}</h2>
        <input type="button" value="修改num值" v-on:click="fn">
        <input type="button" value="修改str值" @click="fn1">
        <input type="button" value="修改arr值" @click="fn2">
        <input type="button" value="修改obj值" @click="fn3">
        <input type="button" value="修改objArr值" @click="fn4">
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    //let 表示定义一个变量;
    //const 表示定义一个常量;
    let num=ref(100);
    let str=ref('好好学习，天天向上');
    let arr=ref([1,3,4,564,321,2323]);
    let obj=ref({name:'张三',age:'20'});
    let objArr=ref([
        {id:1,name:'张11',age:10},
        {id:2,name:'张22',age:11},
        {id:3,name:'张33',age:12},
        {id:4,name:'张44',age:13},
    ]);

    //等同于function fn(){
    
    //}
    //箭头函数等同于function fn(){}
    const fn=()=>{
        num.value++;
        console.log(num.value);
    }

    const fn1=()=>{
        str.value="good good study,day day up";
    }

    const fn2=()=>{
        arr.value[0]=100;
    }


    const fn3=()=>{
        obj.value.name='李四四';
    }

    const fn4=()=>{
        objArr.value[3].name='九九九';
    }

</script>

<style scoped>

</style>